<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>师傅报名</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="__STATIC__/wap/css/mui.min.css">
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
    <style>
        .tocheckbox{
            clear: none;
            float: left;
        }
        .mui-input-group .mui-input-row:after{
            background-color: #fff;
        }
        .mui-scroll >p{
            color: #000000;
        }
    </style>
</head>
<body style="background: #fff">
<header class="mui-bar mui-bar-nav" style="background-color: #01cebf;">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff; margin-top:-5px;font-size: 2rem;"></a>
    <h1 class="mui-title" style="color: #fff">服务师报名</h1>
</header>
<section class="wdzh_main_section1" style="margin-top: 3rem;">
    <div style="background: #ccc;padding-top: 0.5rem;   height: 3rem;line-height: 2rem; width: 95%; border: 1px solid #ccc;  margin: 0.5rem 1rem;font-size: 0.8rem;">可以选择多个技能<span style="float: right;font-size: 1.8rem;
    color: #CC3E47;">{$step}</span></div>
</section>
<div class="mui-content" style="background: #fff">
    <h5 class="mui-content-padded">选择技能:</h5>
    <div class="mui-card" style="box-shadow:none">
        <form class="mui-input-group jionme">
            {foreach $menu as $key =>$v}
            <div class="mui-input-row mui-checkbox mui-left tocheckbox">
                <label>{$v['name']}</label>

                    <input name="checkbox" value="{$v['id']}" type="checkbox" {if condition="in_array($v['id'],$jineng)"} checked  {/if}>

                <!--<input name="checkbox" value="{$v['id']}" type="checkbox" >-->
            </div>
            {/foreach}
        </form>
    </div>
    <div class="mui-input-row mui-radio mui-left">
        <label>我已阅读 <a id="test"><<服务师报名说明>></a></label>
        <input name="radio1" onclick="test(this)" value="0" type="radio">
    </div>

    <div style="height: 3rem;line-height: 3rem;padding: 10px;">
        <input type="submit" id="submit" value="提交" style="display: block;width: 90%;height: 3rem;border: 1px solid #efefef; border-radius: 15px;font-size: 1.3rem;    text-align: center;margin-left: 5%;background-color: #00bfb0;">
    </div>
</div>
<div id="div" ></div>
<div id="popover" class="mui-popover" style="width: 90%; height: 80%;">
    <div class="mui-popover-arrow"></div>
    <div class="mui-scroll-wrapper">
        <span class="mui-scroll" style="text-align:left">
            <p style="display: block;text-align: center">服务师申请说明</p>
            {$config['content']}
        </span>
    </div>
</div>
</body>
<script src="__STATIC__/wap/js/mui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="__STATIC__/wap/layer/layer.js"></script>
<script>
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
    mui('.mui-scroll-wrapper').scroll();
    mui('.mui-input-group').on('change', 'input', function() {
        var value = this.checked?"true":"false";
    });
    function test(thiss) {
        if(thiss.value==1){
            thiss.value=0;thiss.checked=0;
        }else{
            thiss.value=1;
        }
    }
    document.getElementById("test").addEventListener("tap", function() {
        //调用隐藏/显示弹出层
        mui("#popover").popover('toggle', document.getElementById("div"));
    })

    $("#submit").click(function(){
        var res = getCheckBoxRes('jionme');
//        var phone = $('input[name="phone"]').val();
//        var phone1 = $('input[name="phone2"]').val();
        var radio1 = $('input[name="radio1"]').val();


        if(res.length < 1){
            layer.msg('请选择技能', {icon: 5, time: 2000});
            return;
        }
//        if (phone == ''){
//            layer.msg('请填写手机号', {icon: 5, time: 2000});
//            return;
//        }
//        if (phone1 == ''){
//            layer.msg('请填写紧急联系人手机号', {icon: 5, time: 2000});
//            return;
//        }
//        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
//        if (!myreg.test(phone)){
//            layer.msg('请填写正确手机号', {icon: 5, time: 2000});
//            return;
//        }
//        if (!myreg.test(phone1)){
//            layer.msg('请填写正确紧急联系人手机号', {icon: 5, time: 2000});
//            return;
//        }
//        if (phone == phone1){
//            layer.msg('紧急联系人手机号不能相同', {icon: 5, time: 2000});
//            return;
//        }
        if (radio1 ==  0){
            layer.msg('请勾选《服务师报名说明》', {icon: 5, time: 2000});
            return;
        }

        $.ajax({
            type:"post",
            url:'{:url("jionme")}',
            dataType:"json",
            data:{fenleiid:res},
            success: function(data){
                if(data.code == 1){
                    layer.msg(data.msg, {icon: 6, time: 1000},function(){
                        window.location.href = "{:url('index')}";
                    });
                }else{
                    layer.msg(data.msg, {icon: 5, time: 2000});
                }
            }
        });

})
    function getCheckBoxRes(jionme){
        var rdsObj   = document.getElementsByClassName(jionme);
        var checkVal = new Array();
        var k        = 0;
        for(i = 0; i < rdsObj[0].length; i++){
            if(rdsObj[0][i].checked){
                checkVal[k] = rdsObj[0][i].value;
                k++;
            }
        }
        return checkVal;
    }
</script>
</html>